<template>
  <div>
    <h2>购物车</h2>
    <table>
      <thead>
        <tr>
          <td>编号</td>
          <td>商品</td>
          <td>数量</td>
          <td>价格</td>
          <td>小计</td>
        </tr>
      </thead>
      <tbody>
          <tr v-for="item in filterShopcartList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.name}}</td>
            <td>
                <button @click="item.num--">-</button>
                {{item.num}}
                <button @click="item.num++">+</button>
            </td>
            <td>
              {{item.price}}
            </td>
            <td>{{(item.price*item.num).toFixed(2)}}</td>
          </tr>
      </tbody>
      <tfoot>
        <tr>
          <td colspan="5">
            总价：{{getTotalPrice}}
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</template>

<script>
export default {
  data(){
    return{
      shopcartList:[
        {
          id:'1001',
          name:'红富士苹果',
          price:3.69,
          num:1
        },
        {
          id:'1002',
          name:'威化饼干',
          price:1.69,
          num:1
        },
        {
          id:'1003',
          name:'康师傅方便面',
          price:5.21,
          num:1
        }
      ]
    }
  },
  /**
   * 计算属性的标准写法
   * computed:{
   *    计算属性名称:{
   *        get(){
   *          return 新的结果
   *        }
   *     }
   * }
   * 计算属性的简写形式
   * computed:{
   *   计算属性名称(){
   *     return 新的结果
   *   }
   * }
   */
  computed:{
    filterShopcartList(){      
        return this.shopcartList.filter(item=>item.num>0)
    },
    // getTotalPrice:{
    //   get(){
        
    //     //return this.shopcartList.reduce((prve,cur)=>prve+cur.price*cur.num,0).toFixed(2)
    //   }
    // }
    getTotalPrice(){
      let sum=0
        for(let i=0;i<this.shopcartList.length;i++){
          let item=this.shopcartList[i]
          sum+=item.price*item.num
        }
        return sum
    }
  }
}
</script>

<style>
  table{
    border-collapse: collapse;
  }
  td{
    border:1px solid #999;
    padding: 10px;
  }
</style>